<template>
  <!-- 方案规划导航栏 -->
  <div style="width: 100%;height: 100%;text-align: center;">
 
  <div style="display: inline-flex;width: 100%;height: 26%;text-align: left;">
    
    <div style="width: 55%;height: 99%;margin: 1vh auto;border-radius: 4px; background: #202b614f; border: 1px solid rgb(62 111 219 / 88%);">
            
      <div class="titleDiv">
        <div class="barColorBox"></div> 
        <div class="titlefont">制氢厂信息</div>
      </div> 

      <div style="display:block;width: 96%;height: 60%;margin: 1vh auto;overflow:hidden;overflow-y: auto;">
         
        <el-form ref="form" label-position="right"  :model="form" label-width="100px">
          
          <el-row gutter="20" v-for="item,index in plantInfo"  v-bind:key="index"> 
            <el-col :span="6">
              <el-form-item label="制氢厂名称：">
                <el-input style="width: 100%;" v-model="item.plantName"> 
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="日制氢量：">
                <el-input style="width: 100%;" v-model="item.dailyHydrogenProduction"> 
                  <template slot="append">kg/d</template>
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="氢源价格：">
                <el-input style="width: 100%;" v-model="item.hydrogenSourcePrice"> 
                  <template slot="append">元/kg</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2" style="text-align: center;">
              <el-link v-if="calculationStatus!='1'" @click="plantLocate(item.plantName,index)" style="color: #409EFF;margin-top: 2vh;">定位</el-link>
            </el-col>
          </el-row>
         
        </el-form>

      </div>

      <!-- <div v-if="this.supplyType=='2'" style="display: block;width: 98%;text-align: left;height: 17%;margin: 0vh auto;">
        <div @click="addPlant" style="width: 100%;height: 9%;display: inline-flex;cursor: pointer;">
          <img style="height: 24px;margin-top: -0.3vh;" src="../../assets/images/add.png">
          <div style="color: #f2f2f2;">添加制氢厂</div>
        </div>
      </div>   -->

    </div>

    <div style="width: 44%;height: 99%;margin: 1vh auto;border-radius: 4px; background: #202b614f; border: 1px solid rgb(62 111 219 / 88%);">
              
      <div class="titleDiv">
        <div class="barColorBox"></div> 
        <div class="titlefont">用氢站信息</div>
      </div> 

      
      <div style="display:block;width: 96%;height: 60%;margin: 1vh auto;overflow:hidden;overflow-y: auto;">
         
         <el-form ref="form" label-position="right"  :model="form" label-width="100px">
           
          <el-row gutter="20" v-for="item,index in stationInfo"  v-bind:key="index"> 
            <el-col :span="11">
               <el-form-item label="用氢站名称：">
                 <el-input style="width: 100%;" v-model="item.stationName"> 
                 </el-input>
               </el-form-item>
             </el-col>
 
             <el-col :span="11">
               <el-form-item label="日需氢量：">
                 <el-input style="width: 100%;" v-model="item.dailyHydrogenDemand"> 
                   <template slot="append">kg/d</template>
                 </el-input>
               </el-form-item>
             </el-col>
 
         
             <el-col :span="2" style="text-align: left;">
               <el-link v-if="calculationStatus!='1'" @click="stationLocate(item.stationName,index)" style="color: #409EFF;margin-top: 2vh;;">定位</el-link>
             </el-col>
           </el-row>

         </el-form>
 
       </div>
 
       <!-- <div v-if="this.supplyType=='3'"  style="display: block;width: 98%;text-align: left;height: 17%;margin: 0vh auto;">
        <div @click="addStation" style="width: 100%;height: 9%;display: inline-flex;cursor: pointer;">
          <img style="height: 24px;margin-top: -0.3vh;" src="../../assets/images/add.png">
          <div style="color: #f2f2f2;">添加用氢站</div>
        </div>
      </div>   -->

    </div>

  </div>

  
  <div style="width: 99.5%;height: 66%;margin: 1vh auto;text-align: center;">
    <div class="mapDiv" id="container"></div>
    <div style="display: none;" id="panel"></div>

    
    <div style="width: 24.5%;height: 96%;float:right;margin: 5px auto;border-radius: 4px; background: #202b614f; border: 1px solid rgb(62 111 219 / 88%);">
              
      <div class="titleDiv">
        <div class="barColorBox"></div> 
        <div class="titlefont">供需距离</div>
      </div> 

      <div style="display:block;width: 96%;height: 90%;margin: 1vh auto;overflow:hidden;overflow-y: auto;text-align: left;">
        
        <div v-for="item,index in distanceInfo"  v-bind:key="index" style="display: inline-flex;">
          <img style="height: 24px;margin-top: 0.2vh;" src="../../assets/images/distance.png">
          <div style="color: #f2f2f2;font-size: 0.9vw;margin-left: 10px;font-family:emoji;">{{ item.plantName }} 到 {{ item.stationName }} 距离：<span style="font-size: 1vw;color: #409EFF;font-weight: bold;">{{ item.distance }} </span>km</div>
        </div>
         
      </div>

 

    </div>        


  </div>


  
  <div style="margin-top: -1vh;">
      <el-button type="primary" v-if="this.calculationStatus!='1'" @click="savePageData()" style="width: 110px">
        <span class="button-text">保存</span>
      </el-button>
      <el-button type="primary" v-if="this.calculationStatus!='1'" @click="planRoute()" style="width: 110px">
        <span class="button-text">规划路线</span>
      </el-button>
  </div>

</div>
  
</template>


<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: 'b6a7ea952a94b534734e60f1c322c5d8',
    }
</script>

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=3c40b24a0968cfbc241dce18366a6553&plugin=AMap.Driving"></script>


<script>
import AMapLoader from "@amap/amap-jsapi-loader";

  export default {
    name: 'supplyDemandInfo',
    data() {
      return {
        form: {
          id:"",
          supplyType:"",
          transportType:"",
          operatingCycle:"",
          projectId : "",
        },
        plantInfo:[
          {
            plantName:"制氢厂1",
            dailyHydrogenProduction:"0",
            hydrogenSourcePrice:"0",
            lat:"",
            lng:"",
          }
        ],
        stationInfo:[
          {
            stationName:"用氢站1",
            dailyHydrogenDemand:"0", 
            lat:"",
            lng:"",
          }
        ],
        drivingArray:[],
        distanceInfo:[],
        plantIndex : -1,
        stationIndex : -1,
        distanceMap : {},
        nameMap:{},
        activeDate: '',
        type: '',
        map : null,
        supplyType : "",
        project_id: this.$root.project_id,
        calculationStatus : "",
        projectId : "",

      }
    },
    mounted: function() {
      //获取项目id
      this.projectId = this.$route.query.projectId;
      this.form.projectId = this.projectId;
      this.distanceMap = this.getMap();
      this.nameMap = this.getMap();
      this.initMap();
      this.queryCalculateInfo();
      this.initPageData();
      this.$nextTick(function(){
        this.queryPageData();
      });
    },
    methods: {

      
      queryCalculateInfo : function(){

        var vm = this;
        var schemeId = ""; 

        this.$http.post('/iepsapi/ea/algorithm/queryCalculateInfo?schemeId='+schemeId+"&tableName=htp_algorithm_info"+"&projectId="+this.projectId).then((res) => {
          var result = res.data.data;
          if(result){
            vm.calculationStatus = result.calculationStatus;
          }else{
            vm.calculationStatus = '0';
          }
        }).catch((error) => {
          console.log(error);
        });


      }, 

      initPageData : function() {
        
        var vm = this;

        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/queryPageData?projectId='+this.projectId+"&tableName=ht_scheme_selection").then((res) => {
          var result = res.data.data;
          if(result){ 

            var supplyType = result.supplyType;

            if(supplyType=='2'){

              vm.plantInfo = [
                {
                  plantName:"制氢厂1",
                  dailyHydrogenProduction:"0",
                  hydrogenSourcePrice:"0",
                  lat:"",
                  lng:"",
                },      
                {
                  plantName:"制氢厂2",
                  dailyHydrogenProduction:"0",
                  hydrogenSourcePrice:"0",
                  lat:"",
                  lng:"",
                },
                {
                  plantName:"制氢厂3",
                  dailyHydrogenProduction:"0",
                  hydrogenSourcePrice:"0",
                  lat:"",
                  lng:"",
                }
              ];

            } else if(supplyType=='3'){
              
              vm.stationInfo = [
                {
                  stationName:"用氢站1",
                  dailyHydrogenDemand:"0", 
                  lat:"",
                  lng:"",
                },{
                  stationName:"用氢站2",
                  dailyHydrogenDemand:"0", 
                  lat:"",
                  lng:"",
                },{
                  stationName:"用氢站3",
                  dailyHydrogenDemand:"0", 
                  lat:"",
                  lng:"",
                }
              ];

            }

            vm.supplyType = result.supplyType;
          } 

        }).catch((error) => {
          console.log(error);
        });



      },

      initMap : function() {

        var vm = this;

        window._AMapSecurityConfig = {
          securityJsCode: 'b6a7ea952a94b534734e60f1c322c5d8',
        } 

        AMapLoader.load({
            key: "3c40b24a0968cfbc241dce18366a6553", // 申请好的Web端开发者Key，首次调用 load 时必填
            
            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            resizeEnable: true,
            plugins: [
                "AMap.ToolBar", //工具条
                "AMap.Scale", // 比例尺
                "AMap.Geolocation", //定位
            ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap) => {
            console.log(AMap);
            this.map = new AMap.Map("container", { //设置地图容器id
                resizeEnable: true,
                rotateEnable: true,
                pitchEnable: true,
                zoom: 8,
                pitch: 80,
                rotation: -15,
                viewMode: '2D',//开启3D视图,默认为关闭
                buildingAnimation: true,//楼块出现是否带动画
                expandZoomRange: true,
                zooms: [3, 20],
                center: [117.120128,36.652069], //初始化地图中心点位置
            });

            
              // 绑定地图事件
              this.map.on("click", vm.handleMapClick);
              this.map.on("dblclick", vm.handleMapDblClick); 

                                
              //构造路线导航类
              var driving = new AMap.Driving({
                  policy: AMap.DrivingPolicy.LEAST_DISTANCE,
                  map: this.map,
                  showTraffic:false,
                  autoFitView:true,
                  extensions:"all",
                  panel: "panel"
              }); 

              this.driving = driving;

              
        }).catch(e => {
            console.log(e);
        })


      },

      plantLocate:function(plantName,index){
        this.$message({
          type: 'info',
          message: '请点击下方地图定位'+plantName+"所处位置！"
        });    
        this.plantIndex = index;
        this.stationIndex = -1;
      },
      
      stationLocate:function(stationName,index){
        this.$message({
          type: 'info',
          message: '请点击下方地图定位'+stationName+"所处位置！"
        });    
        this.stationIndex = index;
        this.plantIndex = -1;
      },

      addPlant:function(){

        var maxNo = 0; 

        if(this.plantInfo){
          for(var i = 0;i<this.plantInfo.length;i++){
            var value = this.plantInfo[i].plantName; 

            var num = value.replace(/[^\d]/g,' ');
            if(num>maxNo){
              maxNo = num;
            }
             
          }
        }

        this.plantInfo.push({
          plantName:"制氢厂"+(parseInt(maxNo)+1),
          dailyHydrogenProduction:"0",
          hydrogenSourcePrice:"0",
          lat:"",
          lng:"",
        });

      },
      addStation:function(){
        
        var maxNo = 0; 

        if(this.stationInfo){
          for(var i = 0;i<this.stationInfo.length;i++){
            var value = this.stationInfo[i].stationName; 

            var num = value.replace(/[^\d]/g,' ');
            if(num>maxNo){
              maxNo = num;
            }
             
          }
        }

        this.stationInfo.push({
          stationName:"用氢站"+(parseInt(maxNo)+1),
          dailyHydrogenDemand:"0", 
          lat:"",
          lng:"",
        });
      },
 
      
      
      queryPageData : function(){

        var vm = this;

        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/querySupplyDemand?projectId='+this.projectId+"&tableName=supply_demand_info").then((res) => {
          var result = res.data;
          
          if(result){

            if(result.plantInfo.length>0){
              vm.plantInfo = result.plantInfo;
            }
            if(result.stationInfo.length>0){
              vm.stationInfo = result.stationInfo;
            }
 
            window._AMapSecurityConfig = {
              securityJsCode: 'b6a7ea952a94b534734e60f1c322c5d8',
            } 

            AMapLoader.load({
                key: "3c40b24a0968cfbc241dce18366a6553", // 申请好的Web端开发者Key，首次调用 load 时必填
                
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                resizeEnable: true,
                plugins: [
                    "AMap.ToolBar", //工具条
                    "AMap.Scale", // 比例尺
                    "AMap.Geolocation", //定位
                    "AMap.Geocoder",//经纬度进行逆地理编码查询
                    "AMap.Driving",//驾车导航
                ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {

                 //基本地图加载
                  var map = new AMap.Map("container", {
                      resizeEnable: true,
                      zoom: 6.5,
                      pitch: 80,
                      rotation: -15,
                      viewMode: '2D',//开启3D视图,默认为关闭
                      buildingAnimation: true,//楼块出现是否带动画
                      expandZoomRange: true,
                      zooms: [3, 20],
                      center: [117.120128,36.652069], //初始化地图中心点位置
                  });
                  vm.map = map;

                  // 绑定地图事件
                  map.on("click", vm.handleMapClick);
                  map.on("dblclick", vm.handleMapDblClick); 

                  
                  ////
                  
                  if(vm.supplyType=="1"){

                    vm.distanceInfo = [];

                    var plantName = vm.plantInfo[0].plantName;

                    var startLat = vm.plantInfo[0].lat;
                    var startLng = vm.plantInfo[0].lng;

                    var endLat = vm.stationInfo[0].lat;
                    var endLng = vm.stationInfo[0].lng;

                    var stationName = vm.stationInfo[0].stationName;

                    vm.addMarkerToMap(vm.map,startLng,startLat,plantName);
                    vm.addMarkerToMap(vm.map,endLng,endLat,stationName);

                    vm.driving.clear();

                    //构造路线导航类
                    var driving = new AMap.Driving({
                        policy: AMap.DrivingPolicy.LEAST_DISTANCE,
                        map: vm.map,
                        showTraffic:false,
                        autoFitView:true,
                        extensions:"all",
                        panel: "panel"
                    }); 

                    this.driving = driving;
                    // 根据起终点经纬度规划驾车导航路线
                    driving.search(new AMap.LngLat(startLng, startLat), new AMap.LngLat(endLng, endLat), function(status, result) {
                          
                      // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                        if (status === 'complete') {
                            
                            var routes = result.routes; // 获取路线信息
                            if (routes && routes.length > 0) {
                                var distance = routes[0].distance; // 获取第一条路线的总距离，单位为米
                                var resultValue =  (distance / 1000).toFixed(2);
                                vm.form.transportatDistance = resultValue;
                                
                                var info = {
                                    "plantName":plantName,
                                    "stationName":stationName,
                                    "distance":resultValue
                                };

                                vm.distanceInfo.push(info);

                            } 

                        } else {
                            
                        }
                    });

                  }else if(vm.supplyType=="2"){
                     

                    vm.distanceInfo = [];

                    var endLat = vm.stationInfo[0].lat;
                    var endLng = vm.stationInfo[0].lng;

                    var station = vm.stationInfo[0];
                    vm.stationInfo = [];
                    vm.stationInfo.push(station);

                    var stationName = vm.stationInfo[0].stationName;
                    
                    vm.addMarkerToMap(vm.map,endLng,endLat,stationName);

                    for(var i = 0;i<vm.drivingArray.length;i++){
                      var driving = vm.drivingArray[i];
                      driving.clear();
                    }
                    
                    for(var i = 0;i<vm.plantInfo.length;i++){

                        //构造路线导航类
                      var driving = new AMap.Driving({
                          policy: AMap.DrivingPolicy.LEAST_DISTANCE,
                          map: vm.map,
                          showTraffic:false,
                          autoFitView:true,
                          extensions:"all",
                          panel: "panel"
                      }); 

                      vm.drivingArray.push(driving);

                      var plantName = vm.plantInfo[i].plantName;
                      
                      var startLat = vm.plantInfo[i].lat;
                      var startLng = vm.plantInfo[i].lng;

                      if(startLat==""&&startLng==""){
                          continue;
                      }

                      vm.addMarkerToMap(vm.map,startLng,startLat,plantName);

                      const info = {
                          "plantName":plantName,
                          "stationName":stationName,
                          "distance":"-"
                      };

                      // 根据起终点经纬度规划驾车导航路线
                      driving.search(new AMap.LngLat(startLng, startLat), new AMap.LngLat(endLng, endLat), function(status, result) {
                            
                          // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                          if (status === 'complete') {
                                
                              var routes = result.routes; // 获取路线信息
                              if (routes && routes.length > 0) {
                                  var distance = routes[0].distance; // 获取第一条路线的总距离，单位为米
                                  var resultValue =  (distance / 1000).toFixed(2);
                                  vm.form.transportatDistance = resultValue;
                                  info.distance = resultValue;

                              } 

                          } else {
                              
                          }
                            
                            
                        });

                        
                      vm.distanceInfo.push(info);


                    }

                
                    

                  }else if(vm.supplyType=="3"){
                    
                    vm.distanceInfo = [];

                    
                    var plantName = vm.plantInfo[0].plantName;

                    var startLat = vm.plantInfo[0].lat;
                    var startLng = vm.plantInfo[0].lng;

                    var plant = vm.plantInfo[0];
                    vm.plantInfo = [];
                    vm.plantInfo.push(plant);

                    vm.addMarkerToMap(vm.map,startLng,startLat,plantName);

                    for(var i = 0;i<vm.drivingArray.length;i++){
                      var driving = vm.drivingArray[i];
                      driving.clear();
                    }

                    for(var i = 0;i<vm.stationInfo.length;i++){

                        //构造路线导航类
                      var driving = new AMap.Driving({
                          policy: AMap.DrivingPolicy.LEAST_DISTANCE,
                          map: vm.map,
                          showTraffic:false,
                          autoFitView:true,
                          extensions:"all",
                          panel: "panel"
                      }); 

                      vm.drivingArray.push(driving);

                      var endLat = vm.stationInfo[i].lat;
                      var endLng = vm.stationInfo[i].lng;

                      if(endLat==""&&endLng==""){
                          continue;
                      }

                      var stationName = vm.stationInfo[i].stationName;

                      vm.addMarkerToMap(vm.map,endLng,endLat,stationName);

                      const info = {
                          "plantName":plantName,
                          "stationName":stationName,
                          "distance": "-"
                      };

                      // 根据起终点经纬度规划驾车导航路线
                      driving.search(new AMap.LngLat(startLng, startLat), new AMap.LngLat(endLng, endLat), function(status, result) {
                            
                          // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                          if (status === 'complete') {
                                
                              var routes = result.routes; // 获取路线信息
                              if (routes && routes.length > 0) {
                                  var distance = routes[0].distance; // 获取第一条路线的总距离，单位为米
                                  var resultValue =  (distance / 1000).toFixed(2);
                                  vm.form.transportatDistance = resultValue;
                                  info.distance = resultValue;

                              } 

                          } else {
                              
                          }
                            
                            
                        });

                        
                        vm.distanceInfo.push(info);

                    }
                            
                  }
                   
                 

                  
            }).catch(e => {
                console.log(e);
            })

          }else{
            
            window._AMapSecurityConfig = {
              securityJsCode: 'b6a7ea952a94b534734e60f1c322c5d8',
            } 

            AMapLoader.load({
                key: "3c40b24a0968cfbc241dce18366a6553", // 申请好的Web端开发者Key，首次调用 load 时必填
                
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                resizeEnable: true,
                plugins: [
                    "AMap.ToolBar", //工具条
                    "AMap.Scale", // 比例尺
                    "AMap.Geolocation", //定位
                    "AMap.ToolBar", //工具条
                    "AMap.Scale", // 比例尺
                    "AMap.Geolocation", //定位
                    "AMap.Geocoder",//经纬度进行逆地理编码查询
                    "AMap.Driving",//驾车导航
                ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
                console.log(AMap);
                this.map = new AMap.Map("container", { //设置地图容器id
                    resizeEnable: true,
                    rotateEnable: true,
                    pitchEnable: true,
                    zoom: 6.5,
                    pitch: 80,
                    rotation: -15,
                    viewMode: '2D',//开启3D视图,默认为关闭
                    buildingAnimation: true,//楼块出现是否带动画
                    expandZoomRange: true,
                    zooms: [3, 20],
                    center: [117.120128,36.652069], //初始化地图中心点位置
                });
                  
            }).catch(e => {
                console.log(e);
            })

          }
        }).catch((error) => {
          console.log(error);
        });


      },

      addMarkerToMap : function(map,lng,lat,name){

        let Icon = new AMap.Icon({
          size: new AMap.Size(30, 30),
          image: require('../../assets/images/markIcon.png'),
          imageSize: new AMap.Size(30, 30),
          imageOffset:new AMap.Pixel(0,0),
        });

        let labelOffset = new AMap.Pixel(0,-5);


        var labelInfo = name;

        var labelContent = "<div style='width: 9vh;border-radius: 5px;height: 3vh;margin-top: -5.5vh;;background-image: linear-gradient(rgb(152 177 205), rgb(4 72 221 / 55%)); color: #f2f2f2;;text-align: center;font-size: 0.8vw;line-height: 3vh;'> "+labelInfo+" </div>";

        var marker = new AMap.Marker({
          position: new AMap.LngLat(lng,lat),
          icon: Icon,
          anchor: "bottom-center", //设置锚点
          offset: new AMap.Pixel(0, -5),
          label: {
            direction: "top",
            content: labelContent,
            offset: labelOffset,
          },
        }); 

        map.add(marker);

      },


      planRoute:function(){
        
        var vm = this;
        
        if(this.supplyType=="1"){

          vm.distanceInfo = [];

          var plantName = this.plantInfo[0].plantName;

          var startLat = this.plantInfo[0].lat;
          var startLng = this.plantInfo[0].lng;

          

          var endLat = this.stationInfo[0].lat;
          var endLng = this.stationInfo[0].lng;

          var stationName = this.stationInfo[0].stationName;
          
          this.driving.clear();

          //构造路线导航类
          var driving = new AMap.Driving({
              policy: AMap.DrivingPolicy.LEAST_DISTANCE,
              map: this.map,
              showTraffic:false,
              autoFitView:true,
              extensions:"all",
              panel: "panel"
          }); 

          this.driving = driving;
          // 根据起终点经纬度规划驾车导航路线
          driving.search(new AMap.LngLat(startLng, startLat), new AMap.LngLat(endLng, endLat), function(status, result) {
                
            // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
              if (status === 'complete') {
                   
                  var routes = result.routes; // 获取路线信息
                  if (routes && routes.length > 0) {
                      var distance = routes[0].distance; // 获取第一条路线的总距离，单位为米
                      var resultValue =  (distance / 1000).toFixed(2);
                      vm.form.transportatDistance = resultValue;
                       
                      var info = {
                          "plantName":plantName,
                          "stationName":stationName,
                          "distance":resultValue
                      };

                      vm.distanceInfo.push(info);

                  } 

              } else {
                  
              }
          });

        }else if(this.supplyType=="2"){
          
          vm.distanceInfo = [];

          var endLat = this.stationInfo[0].lat;
          var endLng = this.stationInfo[0].lng;

          var stationName = this.stationInfo[0].stationName;
          
          for(var i = 0;i<this.drivingArray.length;i++){
            var driving = this.drivingArray[i];
            driving.clear();
          }
          
          var distanceInfos = [];

          for(var i = 0;i<this.plantInfo.length;i++){

              //构造路线导航类
            var driving = new AMap.Driving({
                policy: AMap.DrivingPolicy.LEAST_DISTANCE,
                map: this.map,
                showTraffic:false,
                autoFitView:true,
                extensions:"all",
                panel: "panel"
            }); 

            this.drivingArray.push(driving);

            var plantName = this.plantInfo[i].plantName;
 
            var startLat = this.plantInfo[i].lat;
            var startLng = this.plantInfo[i].lng;

            if(startLat==""&&startLng==""){
                continue;
            }

            this.nameMap.put(startLat+"_"+startLng,plantName);
               
            const info = {
                "plantName":plantName,
                "stationName":stationName,
                "distance":"-"
            };
            
            // 根据起终点经纬度规划驾车导航路线
            driving.search(new AMap.LngLat(startLng, startLat), new AMap.LngLat(endLng, endLat), function(status, result) {
              

                // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                if (status === 'complete') {
                    
                    var routes = result.routes; // 获取路线信息
                    if (routes && routes.length > 0) {
                        var distance = routes[0].distance; // 获取第一条路线的总距离，单位为米
                        var resultValue =  (distance / 1000).toFixed(2);
                        vm.form.transportatDistance = resultValue;
                        info.distance = resultValue;
                        var location = result.start.location;
                        info.plantName = vm.nameMap.get(location.lat+"_"+location.lng);
                    } 

                } else {
                    
                }
                  
                  
              });

              distanceInfos.push(info);

          }

          vm.distanceInfo = distanceInfos;
          

        }else if(this.supplyType=="3"){
          
          vm.distanceInfo = [];

           
          var plantName = this.plantInfo[0].plantName;

          var startLat = this.plantInfo[0].lat;
          var startLng = this.plantInfo[0].lng;

          for(var i = 0;i<this.drivingArray.length;i++){
            var driving = this.drivingArray[i];
            driving.clear();
          }

            
          var distanceInfos = [];

          for(var i = 0;i<this.stationInfo.length;i++){

              //构造路线导航类
            var driving = new AMap.Driving({
                policy: AMap.DrivingPolicy.LEAST_DISTANCE,
                map: this.map,
                showTraffic:false,
                autoFitView:true,
                extensions:"all",
                panel: "panel"
            }); 

            this.drivingArray.push(driving);

            var endLat = this.stationInfo[i].lat;
            var endLng = this.stationInfo[i].lng;

            if(endLat==""&&endLng==""){
                continue;
            }
            var stationName = this.stationInfo[i].stationName;

            this.nameMap.put(endLat+"_"+endLng,stationName);
            
            const info = {
                "plantName":plantName,
                "stationName":stationName,
                "distance":"-"
            };

             
            // 根据起终点经纬度规划驾车导航路线
            driving.search(new AMap.LngLat(startLng, startLat), new AMap.LngLat(endLng, endLat), function(status, result) {
                  
                // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                if (status === 'complete') {
                      
                    var routes = result.routes; // 获取路线信息
                    if (routes && routes.length > 0) {
                        var distance = routes[0].distance; // 获取第一条路线的总距离，单位为米
                        var resultValue =  (distance / 1000).toFixed(2);
                        vm.form.transportatDistance = resultValue;
                                                
                        info.distance = resultValue;

                        var location = result.end.location;
                        info.stationName = vm.nameMap.get(location.lat+"_"+location.lng);

                    } 

                } else {
                    
                }
                  
                  
              });

              distanceInfos.push(info);

          }

          vm.distanceInfo = distanceInfos;
          

        }

      },
      
      getMap : function() {
          
          //初始化map_,给map_对象增加方法，使map_像Map
          var map_ = new Object();
          map_.put = function(key, value) {
              map_[key+'_'] = value;
          };
          map_.get = function(key) {
              return map_[key+'_'];
          };
          map_.remove = function(key) {
              delete map_[key+'_'];
          };
          map_.keyset = function() {
              var ret = "";
              for(var p in map_) {
                  if(typeof p == 'string' && p.substring(p.length-1) == "_") {
                      ret += ",";
                      ret += p.substring(0,p.length-1);
                  }
              }
              if(ret == "") {
                  return ret.split(",");
              } else {
                  return ret.substring(1).split(",");
              }
          };
          return map_;
      },
      
      handleMapClick : function(e){
        
        if(this.plantIndex!=-1){
          
          var plantName = this.plantInfo[this.plantIndex].plantName;

          this.$confirm('是否选择点击地址为'+plantName+'定位地址?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
          
            var vm = this;

            var marker = vm.distanceMap.get("plant_"+vm.plantIndex);
 
            if(marker){
              vm.map.remove(marker);
            }


            if(vm.driving){
              vm.driving.clear();
            }

            //vm.map.clearMap();

            var lat = e.lnglat.lat;
            var lng = e.lnglat.lng;
             
            vm.plantInfo[vm.plantIndex].lat = lat;
            vm.plantInfo[vm.plantIndex].lng = lng;
    
            
            let Icon = new AMap.Icon({
              size: new AMap.Size(30, 30),
              image: require('../../assets/images/markIcon.png'),
              imageSize: new AMap.Size(30, 30),
              imageOffset:new AMap.Pixel(0,0),
            });

            let labelOffset = new AMap.Pixel(0,-5);


            var labelInfo = plantName;

            var labelContent = "<div style='width: 9vh;border-radius: 5px;height: 3vh;margin-top: -5.5vh;;background-image: linear-gradient(rgb(152 177 205), rgb(4 72 221 / 55%)); color: #f2f2f2;;text-align: center;font-size: 0.8vw;line-height: 3vh;'> "+labelInfo+" </div>";

            var marker = new AMap.Marker({
              position: new AMap.LngLat(lng,lat),
              icon: Icon,
              anchor: "bottom-center", //设置锚点
              offset: new AMap.Pixel(0, -5),
              label: {
                direction: "top",
                content: labelContent,
                offset: labelOffset,
              },
            }); 
 
            vm.map.add(marker);

            vm.distanceMap.put("plant_"+vm.plantIndex,marker);

            vm.plantIndex = "-1";

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });          
          }); 
 
          return;

        }else if(this.stationIndex!=-1){
          
          var stationName = this.stationInfo[this.stationIndex].stationName;

          this.$confirm('是否选择点击地址为'+stationName+'定位地址?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
          
            var vm = this;

            var marker = vm.distanceMap.get("station_"+vm.stationIndex);
 
            if(marker){
              vm.map.remove(marker);
            }

            if(vm.driving){
              vm.driving.clear();
            }

            //vm.map.clearMap();

            var lat = e.lnglat.lat;
            var lng = e.lnglat.lng;
             
            vm.stationInfo[vm.stationIndex].lat = lat;
            vm.stationInfo[vm.stationIndex].lng = lng;
    
            let Icon = new AMap.Icon({
              size: new AMap.Size(30, 30),
              image: require('../../assets/images/markIcon.png'),
              imageSize: new AMap.Size(30, 30),
              imageOffset:new AMap.Pixel(0,0),
            });

            let labelOffset = new AMap.Pixel(0,-5);

            var labelInfo = stationName;

            var labelContent = "<div style='width: 7vh;border-radius: 5px;height: 3vh;margin-top: -5.5vh;;background-image: linear-gradient(rgb(152 177 205), rgb(4 72 221 / 55%)); color: #f2f2f2;;text-align: center;font-size: 0.8vw;line-height: 3vh;'> "+labelInfo+" </div>";

            var marker = new AMap.Marker({
              position: new AMap.LngLat(lng,lat),
              icon: Icon,
              anchor: "bottom-center", //设置锚点
              offset: new AMap.Pixel(0, -5),
              label: {
                direction: "top",
                content: labelContent,
                offset: labelOffset,
              },
            }); 
 
            vm.map.add(marker);

            vm.distanceMap.put("station_"+vm.stationIndex,marker);

            vm.stationIndex = "-1";

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });          
          }); 
 
          return;

        }

      },
      handleMapDblClick : function(e){
        
        if(this.plantIndex!=-1){
          
          var plantName = this.plantInfo[this.plantIndex].plantName;

          this.$confirm('是否选择点击地址为'+plantName+'定位地址?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
          
            var vm = this;

            var marker = vm.distanceMap.get("plant_"+vm.plantIndex);
 
            if(marker){
              vm.map.remove(marker);
            }


            if(vm.driving!=""){
              vm.driving.clear();
            }

            //vm.map.clearMap();

            var lat = e.lnglat.lat;
            var lng = e.lnglat.lng;
             
            vm.plantInfo[vm.plantIndex].lat = lat;
            vm.plantInfo[vm.plantIndex].lng = lng;
    
            
            let Icon = new AMap.Icon({
              size: new AMap.Size(30, 30),
              image: require('../../assets/images/markIcon.png'),
              imageSize: new AMap.Size(30, 30),
              imageOffset:new AMap.Pixel(0,0),
            });

            let labelOffset = new AMap.Pixel(0,-5);


            var labelInfo = plantName;

            var labelContent = "<div style='width: 7vh;border-radius: 5px;height: 3vh;margin-top: -5.5vh;;background-image: linear-gradient(rgb(152 177 205), rgb(4 72 221 / 55%)); color: #f2f2f2;;text-align: center;font-size: 0.8vw;line-height: 3vh;'> "+labelInfo+" </div>";

            var marker = new AMap.Marker({
              position: new AMap.LngLat(lng,lat),
              icon: Icon,
              anchor: "bottom-center", //设置锚点
              offset: new AMap.Pixel(0, -5),
              label: {
                direction: "top",
                content: labelContent,
                offset: labelOffset,
              },
            }); 
 
            vm.map.add(marker);

            vm.distanceMap.put("plant_"+vm.plantIndex,marker);

            vm.plantIndex = "-1";

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });          
          }); 
 
          return;

        }else if(this.stationIndex!=-1){
          
          var stationName = this.stationInfo[this.stationIndex].stationName;

          this.$confirm('是否选择点击地址为'+stationName+'定位地址?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
          
            var vm = this;

            var marker = vm.distanceMap.get("station_"+vm.stationIndex);
 
            if(marker){
              vm.map.remove(marker);
            }

            if(vm.driving){
              vm.driving.clear();
            }

            //vm.map.clearMap();

            var lat = e.lnglat.lat;
            var lng = e.lnglat.lng;
             
            vm.stationInfo[vm.stationIndex].lat = lat;
            vm.stationInfo[vm.stationIndex].lng = lng;
    
            let Icon = new AMap.Icon({
              size: new AMap.Size(30, 30),
              image: require('../../assets/images/markIcon.png'),
              imageSize: new AMap.Size(30, 30),
              imageOffset:new AMap.Pixel(0,0),
            });

            let labelOffset = new AMap.Pixel(0,-5);

            var labelInfo = stationName;

            var labelContent = "<div style='width: 7vh;border-radius: 5px;height: 3vh;margin-top: -5.5vh;;background-image: linear-gradient(rgb(152 177 205), rgb(4 72 221 / 55%)); color: #f2f2f2;;text-align: center;font-size: 0.8vw;line-height: 3vh;'> "+labelInfo+" </div>";

            var marker = new AMap.Marker({
              position: new AMap.LngLat(lng,lat),
              icon: Icon,
              anchor: "bottom-center", //设置锚点
              offset: new AMap.Pixel(0, -5),
              label: {
                direction: "top",
                content: labelContent,
                offset: labelOffset,
              },
            }); 
 
            vm.map.add(marker);

            vm.distanceMap.put("station_"+vm.stationIndex,marker);

            vm.stationIndex = "-1";

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });          
          }); 
 
          return;

        }

      },


      drivingPolicyChange : function(){

          // AMap.DrivingPolicy.LEAST_TIME 最快捷模式

          // AMap.DrivingPolicy.LEAST_FEE     最经济模式
 
          // AMap.DrivingPolicy.LEAST_DISTANCE 最短距离模式

          this.driving.clear();

          var driving;

          var vm = this;

          if(this.form.drivingPolicyValue=="1"){
              //构造路线导航类
              driving = new AMap.Driving({
                  policy: AMap.DrivingPolicy.LEAST_TIME,
                  map: this.map,
                  showTraffic:false,
                  autoFitView:true,
                  extensions:"all",
                  panel: "panel"
              }); 

          }else if(this.form.drivingPolicyValue=="2"){
              //构造路线导航类
              driving = new AMap.Driving({
                  policy: AMap.DrivingPolicy.LEAST_FEE,
                  map: this.map,
                  showTraffic:false,
                  autoFitView:true,
                  extensions:"all",
                  panel: "panel"
              }); 
          }else if(this.form.drivingPolicyValue=="3"){
              //构造路线导航类
              driving = new AMap.Driving({
                  policy: AMap.DrivingPolicy.LEAST_DISTANCE,
                  map: this.map,
                  showTraffic:false,
                  autoFitView:true,
                  extensions:"all",
                  panel: "panel"
              }); 
          }
          
          this.driving = driving; 

          var startingPoint = this.form.startingPoint;
          var endingPoint = this.form.endingPoint;

          var startSplit = startingPoint.split(",");
          var endSplit = endingPoint.split(",");


          // 根据起终点经纬度规划驾车导航路线
          driving.search(new AMap.LngLat(startSplit[0], startSplit[1]), new AMap.LngLat(endSplit[0], endSplit[1]), function(status, result) {
          
         
            // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
              if (status === 'complete') {
                  
                  var routes = result.routes; // 获取路线信息
                  if (routes && routes.length > 0) {
                    
                      var distance = routes[0].distance; // 获取第一条路线的总距离，单位为米
                      var resultValue =  (distance / 1000).toFixed(2);
                    
                      vm.form.transportatDistance = resultValue; 

                      var steps = routes[0].steps;

                      if(steps){

                        var totalDistance = 0;

                        for(var i = 0;i<steps.length;i++){

                          var step = steps[i];
                          var distance2 = step.distance;

                          var toll_road = step.toll_road;

                          if(toll_road.includes("高速")){
                            totalDistance = totalDistance+distance2;
                          }

                        }

                        if(totalDistance!=0){
                          var resultValue =  (totalDistance / 1000).toFixed(2);
                           
                          vm.form.highwayMileage = resultValue; 
                        }else{
                          vm.form.highwayMileage = "0"; 
                        }

                      }

                  } 

              } else {
                  
              }
          });



      },

      savePageData : function(){
 
        var plantInfo = this.plantInfo;
        var distanceInfo = this.distanceInfo; 
        var stationInfo = this.stationInfo;

        if(distanceInfo.length==0){
            this.$message({
              type: 'info',
              message: "请维护制氢厂，用氢站定位信息！"
            });
            return;
        }

        var supplyDemandInfo = [];

        if(this.supplyType=="1"){

          var sv = "";
          var pv = "";

          for(var i = 0;i<plantInfo.length;i++){

            var plant = plantInfo[i];

            var distance = distanceInfo[i];

            var station = stationInfo[i];

            var supplyDemand = {
              "projectId": this.projectId,
              "plantName": plant.plantName,
              "dailyHydrogenProduction": plant.dailyHydrogenProduction,
              "hydrogenSourcePrice": plant.hydrogenSourcePrice,
              "p_lat" : plant.lat,
              "p_lng" : plant.lng,
              "stationName" : station.stationName,
              "dailyHydrogenDemand" : station.dailyHydrogenDemand,
              "s_lat" : station.lat,
              "s_lng" : station.lng, 
              "distance" : distance.distance,
            }

            if(station.lat!=""&&station.lat!=null){
              sv = "1";
            }

            if(plant.lat!=""&&plant.lat!=null){
              pv = "1";
            }

            supplyDemandInfo.push(supplyDemand);
          }

          if(sv==""){
            this.$message({
              type: 'info',
              message: "请维护用氢站定位信息！"
            });
            return;
          }

          if(pv==""){
            this.$message({
              type: 'info',
              message: "请维护制氢厂定位信息！"
            });
            return;
          }

        }else if(this.supplyType=="2"){
          
          var sv = "";
          var pv = "";
          for(var i = 0;i<plantInfo.length;i++){

            var plant = plantInfo[i];

            var distance = distanceInfo[i];

            var distanceValue = "0";

            if(distance){
              distanceValue = distance.distance;
            }

            var station = stationInfo[0];

            var supplyDemand = {
              "projectId": this.projectId,
              "plantName": plant.plantName,
              "dailyHydrogenProduction": plant.dailyHydrogenProduction,
              "hydrogenSourcePrice": plant.hydrogenSourcePrice,
              "p_lat" : plant.lat,
              "p_lng" : plant.lng,
              "stationName" : station.stationName,
              "dailyHydrogenDemand" : station.dailyHydrogenDemand,
              "s_lat" : station.lat,
              "s_lng" : station.lng, 
              "distance" : distanceValue ,
            }

            if(station.lat!=""&&station.lat!=null){
              sv = "1";
            }

            if(plant.lat!=""&&plant.lat!=null){
              pv = "1";
            }

            supplyDemandInfo.push(supplyDemand);
          }

          
          if(sv==""){
            this.$message({
              type: 'info',
              message: "请维护用氢站定位信息！"
            });
            return;
          }

          if(pv==""){
            this.$message({
              type: 'info',
              message: "请至少维护一个制氢厂的定位信息！"
            });
            return;
          }

        
        }else if(this.supplyType=="3"){
          
          var sv = "";
          var pv = "";
                    
          for(var i = 0;i<stationInfo.length;i++){

            var station = stationInfo[i];

            var distance = distanceInfo[i];

            var distanceValue = "0";

            if(distance){
              distanceValue = distance.distance;
            }

            var plant = plantInfo[0];

            var supplyDemand = {
              "projectId": this.projectId,
              "plantName": plant.plantName,
              "dailyHydrogenProduction": plant.dailyHydrogenProduction,
              "hydrogenSourcePrice": plant.hydrogenSourcePrice,
              "p_lat" : plant.lat,
              "p_lng" : plant.lng,
              "stationName" : station.stationName,
              "dailyHydrogenDemand" : station.dailyHydrogenDemand,
              "s_lat" : station.lat,
              "s_lng" : station.lng, 
              "distance" : distanceValue,
            }

            if(station.lat!=""&&station.lat!=null){
              sv = "1";
            }

            if(plant.lat!=""&&plant.lat!=null){
              pv = "1";
            }

            supplyDemandInfo.push(supplyDemand);
          }

          
          
          if(sv==""){
            this.$message({
              type: 'info',
              message: "请至少维护一个用氢站的定位信息！"
            });
            return;
          }

          if(pv==""){
            this.$message({
              type: 'info',
              message: "请维护制氢厂定位信息！"
            });
            return;
          }

           
        }

        var vm = this;
        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/saveSupplyDemandInfo?projectId='+this.projectId, {
          "supplyDemandInfo": JSON.stringify(supplyDemandInfo), 
        }).then((res) => {
        
          if (res.data.flag) { 
            this.$message({
              type: 'success',
              message: res.data.message
            });

          } else {
            this.$message.error(res.data.message);
          }
        });

      },
    
    }
  }
</script>

<style>
  /deep/.el-input.is-disabled .el-input__inner {
      background-color: #4c5b7182;
      border-color: #E4E7ED;
      color: #C0C4CC;
      cursor: not-allowed;
  }
  /deep/ .el-form-item {
      margin-bottom: 5px;
  }
  /deep/ .el-form-item__label {
      text-align: right;
      vertical-align: middle;
      float: left;
      font-size: 14px;
      color: #f2f2f2;
      line-height: 40px;
      padding: 0 1px 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
  /deep/.el-input__inner { 
      background-color: #202b6180;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #5c7bc5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #a3aec5;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 100%;
  }

  /deep/.el-input-group__append, .el-input-group__prepend {
    background-color: #305997;
    color: #ffffff;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #506aa7;
    border-radius: 4px;
    padding: 0 20px;
    width: 1px;
    white-space: nowrap;
  }
</style>


<style scoped> 
    
  /* 设定地图的大小 */
  .mapDiv{
    width: 75%;
    height: 45vh;
    margin: 5px auto;
    float: left;
    padding: 10px;
    border: 1px solid blue;
  }

  .titleDiv {
    width: 100%;
    margin: 0.5vh;
    height: 2.5vh; 
    font-weight: bold; 
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 700;
    font-style: normal;
    font-size: 2vh;
    color: #f2f2f2;
    text-align: left;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
  }
  .barColorBox {
    height: 2.5vh;
    width: 0.7vh;
    border-radius: 1px;
    display: inline-block;
    vertical-align: text-bottom;
    border: none;
    box-shadow: 0 -1px 10px rgba(0,0,0,0.1);
    background-color: #FAFAFA;
    background-image: -webkit-linear-gradient(top,#17b4db,#07c968);
    background-image: -o-linear-gradient(top,#17b4db,#07c968);
    background-image: -ms-linear-gradient(top,#17b4db,#07c968);
    background-image: linear-gradient(top,#17b4db,#07c968);
    background-repeat: repeat-x;
  }

  .titlefont {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 1.8vh;
      padding-left: 5px;
      margin-top: 0vh;
  }



  .buttonStyle {
    height: 4vh;
    width: 24vh;
    display: inline-block;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    cursor: pointer;
    border-radius: 10px;
    font-family: Arial;
    border: none;
    color: #ffffff;
    font-size: 1.6vh;
    background: #1f2c6c3b;
    border-bottom: 1px solid rgb(64, 158, 255);
    margin: 1.5vh 10px;
    text-align: center;
    line-height: 4vh;
    vertical-align: middle;
    text-decoration: none;
  }

  .disabledBox{
    width: 31vh;
    height: 15vh;
    margin: auto;
    border-radius: 4px;
    background: #1d244994;
    border: 1px solid rgb(62 111 219 / 88%);
    cursor: pointer;
  }
  .box{
    width: 31vh;
    height: 15vh;
    margin: auto; 
    border-radius: 4px; 
    background-image: linear-gradient(to bottom, #2946ad, #61dde37a);

    border: 1px solid rgb(62 111 219 / 88%);
    cursor: pointer;
  }
 
  .titleCss{
    font-size: 22px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: #f2f2f2;
  }
</style>




<style type="text/css">
       
  .amap-logo{
    display: none;
    opacity:0 !important;
    }
    .amap-copyright {
        opacity:0;
    }
</style>

<style lang="scss" scoped>

/deep/.amap-logo {
  
}
/deep/ .amap-marker-label {
  top: 20px !important;
  border: 0;
  background: transparent;

  .pointTxt {
    color: rgb(0, 0, 0);
    font-size: 14px;
    font-weight: 600;
    margin-left: 14px;
  }
}
/deep/.amap-marker {
  position: relative;
  height: 50px;
  .map-item__base {
    position: absolute;
    z-index: 9852432;
    color: rgb(255, 255, 255);
    white-space: nowrap;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    top: -27px;
    left: -14px;
  }
 

  .arrowBox {
    position: absolute;
    height: 50px;
    top: -1px;
    left: 1px;
    img {
      position: absolute;
      height: 50px;
    }
  }
  .fontfamily {
    position: absolute;
    left: 5px;
    top: 4px;
    font-size: 34px;
  }
  .pointBox {
    position: absolute;
    left: 10px;
    top: 8px;
    width: 24px;
    height: 22px;

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    img {
      display: inline-block;
      width: 16px;
    }
  }
}
</style>

